<!DOCTYPE HTML>
<html lang="en">

<!-- TODO(crbug.com/658814): Localize strings. -->
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bluetooth Internals</title>
  <link rel="stylesheet" href="chrome://resources/css/chrome_shared.css">
  <link rel="stylesheet" href="chrome://resources/css/spinner.css">
  <link rel="stylesheet" href="bluetooth_internals.css">

  <script type="module" src="main.js"></script>
</head>

<body>
  <div id="page-container">
    <header class="page-header">
      <button id="menu-btn" class="custom-appearance"></button>
      <h1 class="page-title"></h1>
    </header>
    <section id="adapter" class="flex" hidden>
      <div class="header-extras">
        <button id="adapter-refresh-btn">Refresh</button>
      </div>
    </section>
    <section id="devices" hidden>
      <div class="header-extras">
        <button id="scan-btn">Start Scan</button>
      </div>
    </section>
    <section id="debug" hidden>
      <div class="header-extras" id="debug-container"></div>
    </section>
  </div>
  <div id="snackbar-container"></div>
  <aside id="sidebar">
    <div class="overlay"></div>
    <section class="sidebar-content">
      <header>
        <h1>Bluetooth Internals</h1>
      </header>
      <nav>
        <ul role="tablist">
          <li class="selected" data-page-name="adapter">
            <button class="custom-appearance">Adapter</button>
          </li>
          <li data-page-name="devices">
            <button class="custom-appearance">Devices</button>
          </li>
          <li data-page-name="debug" data-page-name="debug">
            <button class="custom-appearance">Debug Logs</button>
          </li>
        </ul>
      </nav>
    </section>
  </aside>
</body>

<template id="table-template">
  <table>
    <thead>
      <tr>
        <th data-field="nameForDisplay">Name</th>
        <th data-field="address">Address</th>
        <th data-field="rssi.value">Latest RSSI</th>
        <th data-field="serviceUuids">Services</th>
        <th data-field="manufacturerDataMap">Manufacturer Data</th>
        <th data-field="isGattConnected">GATT Connection State</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</template>

<template id="device-details-template">
  <div class="device-details-page">
    <div class="header-extras">
      <button class="disconnect">Disconnect</button>
      <button class="forget">Forget</button>
    </div>
    <h3>Status</h3>
    <section class="device-details flex"></section>
    <h3>Services</h3>
    <section class="services"></section>
  </div>
</template>

</html>
